<template>
  <div class="top_box">
    <div class="top_card">
      <div class="title_box">
        <div class="top_segment"></div>
        <span>热门镜像</span>
      </div>
      <div class="title_box mian_box">
        <div
          class="card_box"
          :id="'card_box' + index"
          v-for="(item, index) in hotMirrorList"
          :key="item.id"
        >
          <div @click="toMirrorDetails(item.id, item)">
            <img class="circle" :src="image[index]" />
            <div class="circle">
              <div class="circle_number" :id="'circle_number' + index">
                {{ index + 1 }}
              </div>
              <span class="circle_text" :id="'circle_text' + index">
                {{ item.mirrorName }}
              </span>
            </div>

            <div class="circle user_name">
              <div style="display: flex; align-items: center">
                <img :src="imageDown[index]" />
                <div
                  style="padding-left: 11px"
                  class="circle_color"
                  :id="'circle_color' + index"
                >
                  {{ item.usage }}
                </div>
              </div>
              <div class="circle_color_two" :id="'circle_color_two' + index">
                {{ '上传：' + item.username }}
              </div>
            </div>
          </div>
          <!-- <img class="circle" src="/images/red.png"> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async fetch() {
    this.hotMirrorList = await this.$generalGet('communityMirrors', {
      filter: {
        where: {
          state: 1,
        },
        order: 'usage DESC',
        limit: 6,
      },
    })
  },
  name: 'top',
  components: {},
  data() {
    return {
      hotMirrorList: [],
      image: [
        require('@/static/images/red.png'),
        require('@/static/images/orange.png'),
        require('@/static/images/green.png'),
        require('@/static/images/purple.png'),
        require('@/static/images/blue.png'),
        require('@/static/images/pink.png'),
      ],
      imageDown: [
        require('@/static/images/redDown.png'),
        require('@/static/images/orangeDown.png'),
        require('@/static/images/greenDown.png'),
        require('@/static/images/purpleDown.png'),
        require('@/static/images/blueDown.png'),
        require('@/static/images/pinkDown.png'),
      ],
    }
  },
  mounted() {
    setTimeout(() => {
      for (let i = 0; i < 6; i++) {
        if (i == 0) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#FF5733'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#FFEEED'
          document.getElementById(`circle_text${i}`).style.color = '#FF5733'
          document.getElementById(`circle_color${i}`).style.color = '#FF5733'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#FF5733'
        } else if (i == 1) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#FF8D1A'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#FFF4EB'
          document.getElementById(`circle_text${i}`).style.color = '#FF8D1A'
          document.getElementById(`circle_color${i}`).style.color = '#FF8D1A'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#FF8D1A'
        } else if (i == 2) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#237E2A'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#F0FCF4'
          document.getElementById(`circle_text${i}`).style.color = '#237E2A'
          document.getElementById(`circle_color${i}`).style.color = '#237E2A'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#237E2A'
        } else if (i == 3) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#9D7DEB'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#F3EDFF'
          document.getElementById(`circle_text${i}`).style.color = '#9D7DEB'
          document.getElementById(`circle_color${i}`).style.color = '#9D7DEB'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#9D7DEB'
        } else if (i == 4) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#0776F9'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#EBF0FF'
          document.getElementById(`circle_text${i}`).style.color = '#0776F9'
          document.getElementById(`circle_color${i}`).style.color = '#0776F9'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#0776F9'
        } else if (i == 5) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#CD7CEB'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#FDEBFF'
          document.getElementById(`circle_text${i}`).style.color = '#CD7CEB'
          document.getElementById(`circle_color${i}`).style.color = '#CD7CEB'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#CD7CEB'
        }
      }
    }, 300)
  },
  created() {
    // this.getHotMirror()
    // this.test()
  },
  methods: {
    toMirrorDetails(row, item) {
      // this.$router.push({ path: "/mirrorDetails", query: { id: row } });
      const { href } = this.$router.resolve({
        path: '/mirrorDetails',
        query: {
          id: row,
        },
      })
      window.open(href, '_blank')
    },
  },
}
</script>

<style scoped lang="scss">
.top_box {
  width: 100%;
  height: 175px;
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .top_card {
    width: 97.5%;
    background: rgba(255, 255, 255, 1);
  }

  .title_box {
    display: flex;
    margin: 20px 25px 0 25px;

    .top_segment {
      width: 2px;
      height: 15px;
      background-color: rgba(63, 181, 73, 1);
      // background: rgba(35, 126, 42, 1);
      margin-right: 8px;
    }
  }

  .mian_box {
    display: flex;
    justify-content: space-between;
    // margin: 20px 25px 0 25px;
  }

  .card_box {
    position: relative;
    // background-color: rgba(255, 238, 237, 1);
    width: 16%;
    height: 90px;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
  }

  .circle img {
    width: 14px;
    height: 14px;
  }

  .circle {
    position: absolute;
    width: 100%;
    height: 100%;
    .circle_text {
      margin-left: 11px;
      // color: rgba(255, 87, 51, 1);
      width: 50%;
      height: 23px;
      overflow: hidden; // 超出的文本隐藏
      text-overflow: ellipsis; // 溢出用省略号显示
      white-space: nowrap; // 溢出不换行
      margin-top: -2px;
    }

    .circle_number {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      background: rgba(255, 87, 51, 1);
      text-align: center;
      color: #fff;
      vertical-align: top;
      padding-top: 2px;
      line-height: 15px;
    }

    .circle_color {
      color: #ff583300;
      font-size: 12px;
      padding-top: 4px;
    }

    .circle_color_two {
      color: #ff583300;
      font-size: 12px;
      padding-top: 4px;
    }
  }

  .circle:first-child {
    height: 110%;
  }

  .circle:nth-child(2) {
    left: 7%;
    top: 18%;
    display: flex;
  }

  .circle:nth-child(3) {
    left: 7%;
    top: 59px;
    display: flex;
    // color: rgba(255, 87, 51, 1);
    width: 60px;
    height: 18px;
    width: 85%;
    justify-content: space-between;
  }
}
@media screen and (max-width: 1500px) {
  // .top_box {
  //   min-width: 930px;
  // }
  .top_box {
    .circle:first-child {
      height: 80%;
    }
  }
}
@media screen and (max-width: 960px) {
  // .top_box {
  //   min-width: 930px;
  // }
  .top_box {
    min-width: 880px;
    .circle:first-child {
      height: 50%;
    }
  }
}
</style>